<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src='lib/jquery.min.js'></script>
        <script src="../dist/echarts.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/transitionPlayer.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id="main0"></div>



        <script>

        require(['echarts', 'ecStat', 'myTransform'], function (echarts, ecStat, myTransform) {
            $.get('data/life-expectancy-table.json', function (rawData) {

                echarts.registerTransform(myTransform.aggregate);
                echarts.registerTransform(myTransform.id);

                const COLORS = [
                    '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
                ];
                var COUNTRY_A = 'Germany';
                var COUNTRY_B = 'France';
                const CONTENT_COLORS = {
                    [COUNTRY_A]: '#37a354',
                    [COUNTRY_B]: '#e06343'
                };
                const Z2 = {
                    [COUNTRY_A]: 1,
                    [COUNTRY_B]: 2
                }

                // const COLORS = [
                //     {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
                //     {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
                //     {name: 'Population', index: 2, text: '总人口', unit: ''},
                //     {name: 'Country', index: 3, text: '国家', unit: ''}
                // ];

                var RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'];
                var ID_RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year', 'Id'];
                var SUM_INCOME_DIMENSIONS = ['Income', 'Country'];
                var ANIMATION_DURATION_UPDATE = 1000;
                var AXIS_NAME_STYLE = {
                    nameGap: 25,
                    nameTextStyle: {
                        fontSize: 20
                    },
                };

                var baseOption = {
                    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
                    dataset: [{
                        id: 'RawData',
                        source: rawData
                    }, {
                        id: 'IdRawData',
                        fromDatasetId: 'RawData',
                        transform: [{
                            type: 'filter',
                            config: {
                                dimension: 'Year', gte: 1950
                            }
                        }, {
                            type: 'myTransform:id',
                            config: {
                                dimensionIndex: ID_RAW_DATA_DIMENSIONS.indexOf('Id'),
                                dimensionName: 'Id'
                            }
                        }]
                    }, {
                        id: 'CountryABData',
                        fromDatasetId: 'IdRawData',
                        transform: {
                            type: 'filter',
                            config: {
                                or: [{
                                    dimension: 'Country', '=': COUNTRY_A
                                }, {
                                    dimension: 'Country', '=': COUNTRY_B
                                }]
                            }
                        }
                    }, {
                        id: 'CountryABSumIncome',
                        fromDatasetId: 'CountryABData',
                        transform: {
                            type: 'myTransform:aggregate',
                            config: {
                                resultDimensions: [
                                    { from: 'Income', method: 'sum' },
                                    { from: 'Country' }
                                ],
                                groupBy: 'Country'
                            }
                        }
                    }],
                    tooltip: {}
                };

                var optionCreators = {

                    'CountryAB_Year_Income_Bar': function (datasetId, onlyCountry) {
                        return {
                            xAxis: {
                                type: 'category'
                            },
                            yAxis: {
                                name: 'Income',
                                ...AXIS_NAME_STYLE
                            },
                            series: {
                                type: 'custom',
                                coordinateSystem: 'cartesian2d',
                                datasetId: datasetId,
                                encode: {
                                    x: 'Year',
                                    y: 'Income',
                                    itemName: 'Year',
                                    tooltip: ['Income'],
                                },
                                renderItem: function (params, api) {
                                    var valPos = api.coord([api.value('Year'), api.value('Income')]);
                                    var basePos = api.coord([api.value('Year'), 0]);
                                    var width = api.size([1, 0])[0] * 0.9;

                                    var country = api.value('Country');
                                    if (onlyCountry != null && onlyCountry !== country) {
                                        return;
                                    }

                                    return {
                                        type: 'group',
                                        children: [{
                                            type: 'rect',
                                            transition: ['shape', 'style'],
                                            morph: true,
                                            shape: {
                                                x: basePos[0],
                                                y: basePos[1],
                                                width: width,
                                                height: valPos[1] - basePos[1]
                                            },
                                            z2: Z2[country],
                                            style: {
                                                fill: CONTENT_COLORS[country],
                                                opacity: 0.8
                                            }
                                        }]
                                    };
                                }
                            }
                        };
                    },

                    'CountryAB_Year_Population_Bar': function (datasetId, onlyCountry) {
                        return {
                            xAxis: {
                                type: 'category'
                            },
                            yAxis: {
                                name: 'Population',
                                ...AXIS_NAME_STYLE
                            },
                            series: {
                                type: 'custom',
                                coordinateSystem: 'cartesian2d',
                                datasetId: datasetId,
                                encode: {
                                    x: 'Year',
                                    y: 'Population',
                                    itemName: 'Year',
                                    tooltip: ['Population'],
                                },
                                renderItem: function (params, api) {
                                    var valPos = api.coord([api.value('Year'), api.value('Population')]);
                                    var basePos = api.coord([api.value('Year'), 0]);
                                    var width = api.size([1, 0])[0] * 0.9;

                                    var country = api.value('Country');
                                    if (onlyCountry != null && onlyCountry !== country) {
                                        return;
                                    }

                                    return {
                                        type: 'group',
                                        children: [{
                                            type: 'rect',
                                            transition: ['shape', 'style'],
                                            morph: true,
                                            shape: {
                                                x: basePos[0],
                                                y: basePos[1],
                                                width: width,
                                                height: valPos[1] - basePos[1]
                                            },
                                            style: {
                                                fill: CONTENT_COLORS[country]
                                            }
                                        }]
                                    };
                                }
                            }
                        };
                    },

                    'CountryAB_Income_Population_Scatter': function (datasetId, onlyCountry) {
                        return {
                            xAxis: {
                                name: 'Income',
                                ...AXIS_NAME_STYLE,
                                scale: true
                            },
                            yAxis: {
                                name: 'Population',
                                ...AXIS_NAME_STYLE,
                                scale: true
                            },
                            series: {
                                type: 'custom',
                                coordinateSystem: 'cartesian2d',
                                datasetId: datasetId,
                                encode: {
                                    x: 'Income',
                                    y: 'Population',
                                    itemName: ['Year'],
                                    tooltip: ['Income', 'Population', 'Country']
                                },
                                renderItem: function (params, api) {
                                    var pos = api.coord([api.value('Income'), api.value('Population')]);

                                    var country = api.value('Country');
                                    if (onlyCountry != null && onlyCountry !== country) {
                                        return;
                                    }

                                    return {
                                        type: 'group',
                                        children: [{
                                            type: 'circle',
                                            transition: ['shape', 'style'],
                                            morph: true,
                                            shape: {
                                                cx: pos[0],
                                                cy: pos[1],
                                                r: 10
                                            },
                                            style: {
                                                fill: CONTENT_COLORS[country],
                                                lineWidth: 1,
                                                stroke: '#333',
                                                opacity: 1,
                                                enterFrom: {
                                                    opacity: 0
                                                }
                                            }
                                        }]
                                    };
                                }
                            }
                        };
                    },


                    'CountryAB_Income_Sum_Bar': function (datasetId) {
                        return {
                            xAxis: {
                                name: 'Income',
                                ...AXIS_NAME_STYLE
                            },
                            yAxis: {
                                type: 'category'
                            },
                            series: {
                                type: 'custom',
                                coordinateSystem: 'cartesian2d',
                                datasetId: datasetId,
                                encode: {
                                    x: 'Income',
                                    y: 'Country',
                                    itemName: ['Country'],
                                    tooltip: ['Income']
                                },
                                renderItem: function (params, api) {
                                    var country = api.ordinalRawValue('Country');
                                    var valPos = api.coord([api.value('Income'), country]);
                                    var basePos = api.coord([0, country]);
                                    var height = api.size([0, 1])[1] * 0.4;

                                    return {
                                        type: 'group',
                                        children: [{
                                            type: 'rect',
                                            transition: ['shape', 'style'],
                                            morph: true,
                                            shape: {
                                                x: basePos[0],
                                                y: valPos[1] - height / 2,
                                                width: valPos[0] - basePos[0],
                                                height: height
                                            },
                                            style: {
                                                fill: CONTENT_COLORS[country]
                                                // lineWidth: 0,
                                                // stroke: '#333',
                                                // opacity: 1,
                                                // enterFrom: {
                                                //     opacity: 0
                                                // }
                                            }
                                        }]
                                    };
                                }
                            }
                        };
                    }

                };

                var player = transitionPlayer.create({
                    chart: function () {
                        return chart;
                    },
                    seriesIndex: 0,
                    replaceMerge: ['xAxis', 'yAxis'],
                    dataMeta: {
                        'IdRawData': {
                            dimensions: ID_RAW_DATA_DIMENSIONS,
                            uniqueDimension: 'Id'
                        },
                        'CountryABData': {
                            dimensions: ID_RAW_DATA_DIMENSIONS,
                            uniqueDimension: 'Id'
                        },
                        'CountryABSumIncome': {
                            dimensions: SUM_INCOME_DIMENSIONS,
                            uniqueDimension: 'Country'
                        }
                    },
                    optionList: [{
                        dataMetaKey: 'CountryABData',
                        option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData', COUNTRY_A)
                    }, {
                        dataMetaKey: 'CountryABData',
                        option: optionCreators['CountryAB_Year_Population_Bar']('CountryABData', COUNTRY_A)
                    }, {
                        dataMetaKey: 'CountryABData',
                        option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData', COUNTRY_A)
                    }, {
                        dataMetaKey: 'CountryABData',
                        option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData')
                    }, {
                        dataMetaKey: 'CountryABSumIncome',
                        option: optionCreators['CountryAB_Income_Sum_Bar']('CountryABSumIncome')
                    }, {
                        dataMetaKey: 'CountryABData',
                        option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData')
                    }]
                });


                var chart = testHelper.create(echarts, 'main0', {
                    title: [
                        'Test: buttons, should morph animation merge/split.',
                        'Test: click buttons **before animation finished**, should no blink.',
                        'Test: click buttons **twice**, should no blink.',
                        'Test: use dataZoom, update animation should exist'
                    ],
                    option: baseOption,
                    lazyUpdate: true,
                    height: 600,
                    buttons: [{
                        text: 'next',
                        onclick: function () {
                            player.next();
                        }
                    }, {
                        text: 'previous',
                        onclick: function () {
                            player.previous();
                        }
                    }]
                });

                player.next();

            });

        });

        </script>



    </body>
</html>